{% extends "personal_center/base.html" %}
{% load state_display %}

{% block page_link %}
    <link href="../../static/personnel/css/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .text-version {
            width: 100%;text-align: center;padding-left: 3px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
        }
        .table_wrap {
            width: 100%;height: 100%;overflow: auto;border: #cecece solid 1px;border-left: none;
        }
        table {
            table-layout: fixed;width: 100%;border-collapse: collapse;
        }
        td {
            height: 35px;line-height: 35px;border: #cecece solid 1px;font-size: 12px;
        }
        thead tr th {
            position: sticky;top: 0;background: #EEEEEE;text-align: center;height: 35px;line-height: 35px;border-right: #cecece solid 1px;border-left: #cecece solid 1px;font-size: 12px;font-weight: normal;
        }
        .button_for_control {
            width: 90px;height: 30px;border: 1px solid #99D3F5;background: #D0EEFF;border-radius: 4px;letter-spacing: 0;line-height: 30px;color: #089bab;margin: 5px 0;
        }
        .shade {
            position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(36, 36, 36, 0.5);display: none;z-index: 10000;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div style="width: 100%;height: 100%;background: white;">
        <div style="width: 100%;height: 40px;">
            <div style="width: 15%;height: 40px;display: inline-block;vertical-align: top;padding-left: 0.5%;padding-top: 5px;">
                <select name="" id="year" style="width: 100%;height: 30px;border: #2db7f5 solid 1px;outline: none;" class="dept_select">
                    {% for year in year_list %}
                        <option value="{{ year }}">{{ year }}</option>
                    {% endfor %}
                </select>
            </div>
            <div style="width: 5%;height: 40px;display: inline-block;vertical-align: top;padding-top: 5px;">
                <button style="width: 80px;height: 30px;border: #2db7f5 solid 1px;background: #2db7f5;color: white;letter-spacing: 5px;" onclick="select_year()">搜索</button>
            </div>
            <div style="width: 59%;height: 40px;display: inline-block;vertical-align: top;line-height: 40px;text-align: center;letter-spacing: 1.5px;"><strong style="font-size: 18px;">{{ year_num }}年医德医风考核结果公示</strong></div>
            <div id="" style="width: 100px;float: right;text-align: center;margin-right: 1%;height: 40px;">
                <button id="" onmousemove="page_zhanshi()" onmouseout="page_yincang()"
                        style="width: 100px;height: 30px;line-height: 27px;border: #1E90FF solid 1px;background: #1E90FF;color: white;margin-top: 5px;border-radius: 3px;">
                    操作
                </button>
            </div>

            <div id="page_one" onmousemove="page_zhanshi()" onmouseout="page_yincang()" style="z-index: 1000; position: absolute; width: 100px; height: auto;right: 0.9%; top: 80px;background: #FFFFFF; box-shadow: rgb(204 204 204) 2px 2px 10px;padding: 5px;display: none;">
                <button onclick="DownloadAssessmentResults()" class="button_for_control">
                    下载
                </button>

                <button onclick="DataStatistics()" class="button_for_control">
                    数据统计
                </button>
            </div>
        </div>

        <div style="width: 100%;height: 95%;">
            <div class="table_wrap">
                <table id="table" style="{% if not examine_data_list|length %}height: 100%;{% endif %}">
                    <thead>
                        <tr id="thead-title">
                            <th style="width: 50px;">序号</th>
                            <th style="width: 150px;">参评科室/小组</th>
                            <th style="width: 60px;">参评人数</th>
                            <th style="width: 250px;">优秀</th>
                            <th style="width: 60px;">优秀人数</th>
                            <th style="width: 250px;">良好</th>
                            <th style="width: 250px;">一般</th>
                            <th style="width: 250px;">较差</th>
                        </tr>
                    </thead>
                    <tbody id="table-tbody">
                        {% if examine_data_list|length %}
                            {% for examine in examine_data_list %}
                                <tr>
                                    <td title="{{ examine.serial }}"><div class="text-version">{{ examine.serial }}</div></td>
                                    <td title="{{ examine.company_name }}"><div class="text-version">{{ examine.company_name }}</div></td>
                                    <td title="{{ examine.participate_number }}"><div class="text-version">{{ examine.participate_number }}</div></td>
                                    <td title="{{ examine.best_prople }}"><div class="text-version" style="text-align: left;padding-left: 2px;padding-right: 2px;">{{ examine.best_prople }}</div></td>
                                    <td title="{{ examine.best_count }}"><div class="text-version">{{ examine.best_count }}</div></td>
                                    <td title="{{ examine.good_prople }}"><div class="text-version" style="text-align: left;padding-left: 2px;padding-right: 2px;">{{ examine.good_prople }}</div></td>
                                    <td title="{{ examine.ordinary_prople }}"><div class="text-version" style="text-align: left;padding-left: 2px;padding-right: 2px;">{{ examine.ordinary_prople }}</div></td>
                                    <td title="{{ examine.bad_prople }}"><div class="text-version" style="text-align: left;padding-left: 2px;padding-right: 2px;">{{ examine.bad_prople }}</div></td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr style="width: 100%;height: 100%;">
                                <td colspan="8" style="width: 100%;height: 100%;text-align: center;line-height: 100%;">
                                    暂无数据
                                </td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="GeneralInformation" class="shade">
        <div id="first-model" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 400px;height: 300px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="box" style="width: 100%;height: 40px;background: #f4f7fa;cursor: move;border-top-left-radius: 3px;border-top-right-radius: 3px;line-height: 40px;border-bottom: #dfdfdf solid 1px;">
                    <div style="width: 20%;margin-left: 1%;display: inline-block;line-height: 0px;font-size: 14px;">
                        数据统计
                    </div>
                    <span onclick="ModifyingClose()" style="float: right;padding-right: 2%;cursor: pointer;">
                        <i class="iconfont icon-quchu"></i>
                    </span>
                </div>
                <div style="width: 100%;height: 255px;background: white;padding-top: 10px;padding-left: 3.5%;">
                    <div style="width: 100%;text-align: center;">
                        <h5 id="year_title"></h5>
                    </div>
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">参评总人数:</label>
                        <p id="department" style="width: 60%;height: 30px;border: none;outline: none;padding-left: 1%;margin-top: 5px;display: inline-block;line-height: 30px;"></p>
                    </div>
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;letter-spacing: 5px;">优秀人数:</label>
                        <p id="excellent" style="width: 60%;height: 30px;border: none;outline: none;padding-left: 1%;margin-top: 5px;display: inline-block;line-height: 30px;"></p>
                    </div>
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;letter-spacing: 5px;">良好人数:</label>
                        <p id="good" style="width: 60%;height: 30px;border: none;outline: none;padding-left: 1%;margin-top: 5px;display: inline-block;line-height: 30px;"></p>
                    </div>
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;letter-spacing: 5px;">一般人数:</label>
                        <p id="sameas" style="width: 60%;height: 30px;border: none;outline: none;padding-left: 1%;margin-top: 5px;display: inline-block;line-height: 30px;"></p>
                    </div>
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;letter-spacing: 5px;">较差人数:</label>
                        <p id="relatively" style="width: 60%;height: 30px;border: none;outline: none;padding-left: 1%;margin-top: 5px;display: inline-block;line-height: 30px;"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="../../static/personnel/js/jquery-1.11.1.min.js"></script>
    <script src="../../static/personnel/js/jquery.searchableSelect.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("sponsor").className = "add-nav-active";
        };

        function select_and_search() {
            xmSelect.render({
                el: '#selectDemo',
                checkbox: true,
                repeat: false,
                autoRow: true,
                filterable: true,
                prop: {name: 'name', value: 'value',},
                height: '200px',
                tips: '请选择',
                tree: {
                    show: true,
                    showFolderIcon: true,
                    showLine: true,
                    indent: 20,
                    expandedKeys: [-3],
                    strict: false,
                },
                data: function () {
                    return {{ dep_dict_list | safe }};

                },
                on: function (data) {
                    var arr = data.arr;                     //arr:  当前多选已选中的数据
                    console.log("data: ", arr)
                    var li_list = document.getElementsByClassName("xm-icon-duox")
                    for (var i=0; i<li_list.length; i++) {
                        console.log(li_list[i].selected)
                    }
                },
            });
        }

        $(function(){
            $('#year').searchableSelect();
        });

        var select_list = document.getElementsByClassName("searchable-select-holder");
        for (var sel=0; sel<select_list.length; sel++) {
            select_list[sel].style.height = '30px';
            select_list[sel].style.borderRadius = '0';
        }

        function select_year() {
            document.getElementById("loading").style.display = "inline-block";
            var years = document.getElementById("year").value;
            var form = new FormData();
            form.append("years", years)
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/medical-ethics/AssessmentPublicity.html", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate['code'] === 200) {
                            create_table(JsonDate["data"])
                        } else {
                            alert(JsonDate['message'])
                        }

                    }
                }
            }
        }

        function create_table(json_data) {
            var table_tbody = document.getElementById("table-tbody");
            table_tbody.innerHTML = "";
            for (var i=0; i<json_data.length; i++) {
                var html_str = `
                    <tr>
                        <td title="`+json_data[i]["serial"]+`"><div class="text-version">`+json_data[i]["serial"]+`</div></td>
                        <td title="`+json_data[i]["company_name"]+`"><div class="text-version">`+json_data[i]["company_name"]+`</div></td>
                        <td title="`+json_data[i]["participate_number"]+`"><div class="text-version">`+json_data[i]["participate_number"]+`</div></td>
                        <td title="`+json_data[i]["best_prople"]+`"><div class="text-version" style="text-align: left;padding-left: 2px;padding-right: 2px;">`+json_data[i]["best_prople"]+`</div></td>
                        <td title="`+json_data[i]["best_count"]+`"><div class="text-version">`+json_data[i]["best_count"]+`</div></td>
                        <td title="`+json_data[i]["good_prople"]+`"><div class="text-version" style="text-align: left;padding-left: 2px;padding-right: 2px;">`+json_data[i]["good_prople"]+`</div></td>
                        <td title="`+json_data[i]["ordinary_prople"]+`"><div class="text-version" style="text-align: left;padding-left: 2px;padding-right: 2px;">`+json_data[i]["ordinary_prople"]+`</div></td>
                        <td title="`+json_data[i]["bad_prople"]+`"><div class="text-version" style="text-align: left;padding-left: 2px;padding-right: 2px;">`+json_data[i]["bad_prople"]+`</div></td>
                    </tr>
                `
                $("#table-tbody").append(html_str);
            }
        }
        
        function DownloadAssessmentResults() {
            document.getElementById("loading").style.display = "inline-block";
            var years = document.getElementById("year").value;
            var form = new FormData();
            form.append("years", years)
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/medical-ethics/DownloadAssessment", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate['code'] === 200) {
                            window.location.href = JsonDate['file_path'];
                        } else {
                            alert(JsonDate['message'])
                        }

                    }
                }
            }
        }

        function page_zhanshi() {
            document.getElementById('page_one').style.display = 'inline-block';
        }

        function page_yincang() {
            document.getElementById('page_one').style.display = 'none';
        }

        function DataStatistics() {
            document.getElementById("loading").style.display = "inline-block";
            var years = document.getElementById("year").value;
            var form = new FormData();
            form.append("years", years)
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/medical-ethics/data_statistics", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate['code'] === 200) {
                            document.getElementById("GeneralInformation").style.display = "table-row";
                            document.getElementById("year_title").innerText = JsonDate['data']["years"] + "年医德医风数据统计";
                            document.getElementById("department").innerText = JsonDate['data']["all_count"] + " 人";
                            document.getElementById("excellent").innerText = JsonDate['data']["best_cunt"] + " 人";
                            document.getElementById("good").innerText = JsonDate['data']["good_cunt"] + " 人";
                            document.getElementById("sameas").innerText = JsonDate['data']["ordinary_cunt"] + " 人";
                            document.getElementById("relatively").innerText = JsonDate['data']["bad_cunt"] + " 人";
                        } else {
                            alert(JsonDate['message'])
                        }

                    }
                }
            }
        }

        let staff_box = document.querySelector("#box");
        let staff_model = document.querySelector("#first-model");
        staff_box.addEventListener("mousedown", function (e) {
            let x = e.pageX - staff_model.offsetLeft;
            let y = e.pageY - staff_model.offsetTop;

            document.addEventListener("mousemove", move);
            function move(e) {
                staff_model.style.left = e.pageX - x + 'px';
                staff_model.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function ModifyingClose() {
            document.getElementById("GeneralInformation").style.display = "none";
        }
    </script>
{% endblock %}
